:root {
  --color-grey-225-10-15: hsl(225, 10%, 15%); /* text */
  --color-grey-225-10-35: hsl(225, 10%, 35%); /* icons */
  --color-grey-225-10-55: hsl(225, 10%, 55%);
  --color-grey-225-10-75: hsl(225, 10%, 75%); /* lines */
  --color-grey-225-10-80: hsl(225, 10%, 80%); /* hover on grey bg */
  --color-grey-225-10-85: hsl(225, 10%, 85%); /* app window */
  --color-grey-225-10-90: hsl(225, 10%, 90%); /* button hover */
  --color-grey-225-10-95: hsl(225, 10%, 95%); /* backgrounds, hover */
  --color-grey-225-10-97: hsl(225, 10%, 97%); /* form element backgrounds */

  --color-blue-205-100-40: hsl(205, 100%, 40%); /* outline */
  --color-blue-205-100-45: hsl(205, 100%, 45%); /* primary hover */
  --color-blue-205-100-50: hsl(205, 100%, 50%); /* primary */
  --color-blue-205-100-95: hsl(205, 100%, 95%);

  --color-green-150-86-44: hsl(150, 86%, 44%); /* success */

  --color-red-360-100-40: hsl(360, 100%, 40%); /* error hover */
  --color-red-360-100-45: hsl(360, 100%, 45%); /* error */
  --color-red-360-100-92: hsl(360, 100%, 92%); /* hover */
  --color-red-360-100-97: hsl(360, 100%, 97%); /* backgrounds */

  --color-yellow-47-88-53: hsl(47, 88%, 53%); /* warning */
  --color-yellow-47-86-91: hsl(47, 86%, 91%); /* backgrounds */

  --color-orange-20-98-52: hsl(20, 98%, 52%); /* new badges */

  --color-white: hsl(0, 0%, 100%);
  --color-white-opacity-80: hsla(0, 0%, 100%, 80%);
  --color-black: hsl(0, 0%, 0%);
  --color-black-opacity-10: hsla(0, 0%, 0%, 10%);
  --color-black-opacity-30: hsla(0, 0%, 0%, 30%);

  --link-color: var(--color-blue-205-100-50);
}
